<template>
  <div class="eva-item">
    <div class="eva-title">
      <div class="eva-user">
        <img :src="eva?.member_avatar" class="avatar" alt="">
        <div class="name-time">
          <div class="user-name"> {{ eva?.member_name || eva?.member_nmae }} </div>
          <div class="time"> {{ eva?.create_time }} </div>
        </div>
      </div>
      <div class="star-box">
        <a-rate v-model:value="eva.star" allow-half disabled/>
      </div>
    </div>
    <div class="eva-desc" @click="nav"> {{ eva?.detail }} </div>
    <div class="is-list" v-if="isList">
      <div class="eva-img-box">
        <img :src="img" class="eva-img" alt="" v-for="img in eva?.img">
      </div>
      <div class="shop-reply" v-if="eva?.reply"> 商家回复：{{ eva?.reply }} </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  isList: {
    default: false,
    type: Boolean
  },
  isNav: {
    default: false,
    type: Boolean
  },
  eva: {
    type: Object,
    default: () => {}
  }
})
const star = ref(4.1)
const nav = () => {
  if(props.isNav) router.push({name: 'evaList'})
}
</script>
<style lang="scss" scoped>
.eva-item {
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  box-sizing: border-box;
  background-color: #fff;
  .eva-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    .eva-user {
      display: flex;
      align-items: center;
      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .name-time {
        display: flex;
        flex-direction: column;
        align-items: start;
        .user-name {
          font-size: 14px;
        }
        .time {
          color: #999;
          font-size: 12px;
        }
      }
    }
    .star-box {
      .ant-rate {
        font-size: 14px;
        line-height: 14px;
      }
    }
  }
  .eva-desc {
    cursor: pointer;
    margin-top: 12px;
  }
  .eva-img-box {
    margin-top: 20px;
    .eva-img {
      width: 60px;
      height: 80px;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .shop-reply {
    background-color: #EEE;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
  }
}
</style>